<template>
  <view class="container">
		<!-- 底部全选 -->
		<view class="action" v-if="edit">
			<label>
				<checkbox checked="true" color="#007AFF" />
				全选
			</label>
			<view class="del-btn">删除</view>
		</view>
		<!-- 头部管理 -->
		<view class="header">
			<text @click="editList">{{!edit ? "管理" : "完成"}}</text>
		</view>
		<!-- 列表 -->
    <uni-swipe-action ref="swiperActionRef" class="custom-swipAction">
      <uni-swipe-action-item
				v-for="(item,index) in histroyList"
				:key="item+index"
        :threshold="0"
        :right-options="options"
        @click="onClick"
				@change="change(index)"
				:disabled="edit"
      >
				<label>
					<view class="content-box" @click="jumpDetail()">
						<checkbox :checked="item.checkd" color="#007AFF" v-show="edit"/>
						<view class="content">
							<text class="type">{{item.type}}</text>
							<view class="tag">
								<uni-tag 
									v-for="(tag,index) in item.tags"
									:key="item+index"
									class="tag-margin" 
									:inverted="true" 
									:text="tag" 
									type="primary" />
							</view>
						</view>
						<text class="time">{{item.date}}</text>
					</view>
				</label>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script setup>
import { ref,reactive } from "vue";
const swiperActionRef = ref(null);
// 测试数据 start
const histroyList = ref([{
	type:"脚本生成",
	tags:["300字","短视频"],
	date:"2025-2-12 15:48",
	checkd:false,
	isOpen:"none",
},{
	type:"文本改写",
	tags:["300字","短视频"],
	date:"2025-2-12 15:48",
	checkd:false,
	isOpen:"none",
},{
	type:"脚本生成",
	tags:["300字","短视频"],
	date:"2025-2-12 15:48",
	checkd:false,
	isOpen:"none",
}])
const edit = ref(false)
// 测试数据 end
const options = ref([
  {
    text: "取消",
    style: {
      backgroundColor: "#F7F7F7",
			color:"#9A9A9A"
    },
  },
  {
    text: "删除",
    style: {
      backgroundColor: "#FF5C5C",
    },
  },
]);
const onClick = (e) => {
	if(e.content.text === "取消") {
		swiperActionRef.value.closeAll();
	}
  if(e.content.text === "删除") {
		uni.showModal({
			title: '提示',
			content: '确认删除该条历史记录?',
			success: res => {
				if (res.confirm) {
					console.log("用户点击确定");
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
};
const change = (event,index) => {
  console.log("改变事件", event);
	console.log("histroyList.value",histroyList.value);
};
const editList = () => {
	if(!edit.value) {
		// const nVal = histroyList.value.map(item => {
		// 	console.log(item.isOpen);
		// 	return {...item,isOpen:"none"}
		// })
		// histroyList.value = nVal
		// console.log("histroyList.value",histroyList.value);
		swiperActionRef.value.closeAll();
	}
	edit.value = !edit.value;
}
const jumpDetail = () => {
	if(!edit.value) {
		uni.navigateTo({
			url: '/pages/history/historyDetail',
		});
	}	
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  /* background: #fafcff; */
	/* background: linear-gradient(to bottom, #C4DCFA, #f0f0f0); */
	background: #F7F7F7;
}
.header {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 20rpx;
}
.action {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	width: 100%;
	height: 180rpx;
	background: white;
	box-sizing: border-box;
	.del-btn {
		padding: 20rpx 40rpx;
		background-color: #FF5C5C;
		color: white;
		border-radius: 15rpx;
		font-size: 30rpx;
		line-height: 40rpx;
	}
}
.custom-swipAction::v-deep>view {
	border-radius: 20rpx;
	overflow: hidden;
}
.content-box {
  flex: 1;
  justify-content: center;
  height: 100rpx;
  /* line-height: 44px; */
  padding: 40rpx 20rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
	background-color: #fff;
	border-bottom-color: #f5f5f5;
  border-bottom-width: 1rpx;
  border-bottom-style: solid; 
	/* border-radius: 20rpx; */
  .content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
    margin-left: 20rpx;
    .type {
      font-size: 35rpx;
			font-weight: bold;
    }
		.tag-margin {
			margin-right: 20rpx;
		}
  }
  .time {
    color: #999;
    font-size: 28rpx;
  }
}
</style>
